﻿@{
    if (Session["Clinic"] != null)
    {
        HMS.Web.Helpers.Clinic clinic = new HMS.Web.Helpers.Clinic();
        clinic = (HMS.Web.Helpers.Clinic)Session["Clinic"];
        ViewBag.Title = clinic.Name;
    }
    else
  {
    ViewBag.Title = "CaptureImages";
    }
}

<style>
    button {
        border: none;
        display: block;
        padding: 0.5em 1em;
        margin: 1% auto 0;
        cursor: pointer;
        color: #fff;
        background-color: #9f361b;
    }

        button:active {
            background-color: #e44d26;
        }

    .waiting {
        float: right;
        height: 40px;
        font-size: 2em;
        background: #e7e7e7;
        margin-top: 20px;
    }

    /*#images img{width:100px;height:100px;}*/
</style>
<link href="~/Content/shadowbox.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/shadowbox.js"></script>
<link href="~/Content/jquery.bxslider.css" rel="stylesheet" />
<script src="~/Scripts/jquery.bxslider.min.js"></script>
<script type="text/javascript">
    var url;
    var noOfImages = 0;
    var images = "";
    var slideObj;
    (function () {
        window.addEventListener("DOMContentLoaded", function () {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("c"),
                context = canvas.getContext("2d"),
                video = document.getElementById("v"),
                videoObj = { "video": true },
                errBack = function (error) {
                    console.log("Video capture error: ", error.code);
                };

            // Put video listeners into place
            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
            else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            $("#btnCapture").click(function () {
                context.drawImage(video, 0, 0, 640, 480);
                url = document.querySelector("canvas").toDataURL("image/png","1");
                var imageholder = "<div id=" + 1 + " style=' width:150px;height:120px;float: left;border-color: white;border-style: solid;margin-top:20px;'><li><span style='padding-right: 6px;float: right;font-size: large;cursor: pointer;' onclick='deleteImage(this);'>x</span><a class='fancybox'  rel='group' href=" + url + "><img src = " + url + " height = 75 width = 100 style='margin-top: 20px;margin-left: 20px;'></a></li></div>";
                
                $("#images").append(imageholder);

                //var imageElement = "<li><a class='fancybox'  rel='group' href=" + url + "><img src=" + url + "  height = 75 width = 100 style='margin-top: 20px;margin-left: 20px;' alt='' /></a></li>";
                ////$("#images").append(imageElement);
                $(".fancybox").fancybox();
                //if(slideObj)
                //    slideObj.destroySlider();
                //slideObj = $("#images").bxSlider({
                //    minSlides: 2,
                //    maxSlides: 10,
                //    slideWidth: 250,
                //    slideMargin: 5,
                //    infiniteLoop: true
                //});
                //document.querySelector("#snapshot").src = url;
                document.querySelector("#snapshotdiv").style.display = "inline-block";
                images = images + url.replace('data:image/png;base64,', '') + "~";
                noOfImages = noOfImages + 1;
                if (noOfImages == 5) $("#btnCapture").attr('disabled', 'disabled');
            });

            $("#SaveImage").click(function () {

                $("#divWait").css('display', 'block');
                $("#divWait").focus(10);

                var ecount = 0;
                images = images.slice(0, -1);
                var imageReq = [{}];
                setTimeout(function () {
                    for (var i = 0; i < images.split('~').length; i++) {
                        imageReq[i] = images.split('~')[i];
                        $.ajax({
                            beforeSend: function () {
                            },
                            type: 'POST',
                            async: false,
                            url: _AbsolutePath + 'Appointment/SaveImage',
                            data: JSON.stringify({ imageData: imageReq[i] }),
                            //data: '{ "lstimageData" : "' + imageReq + '" }',
                            caller: arguments.callee.name,
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            success: function (msg) {
                            },
                            error: function (xhr) {
                                ecount++;
                            }
                        });
                    }

                    if (ecount == 0) {
                        location.href = _AbsolutePath + 'Appointment/EditAppointment';
                    } else {
                        $("#divWait").css('display', 'none');
                        alert("Unable to save images!");
                    }
                }, 500);
            });
            $("#btnSaveImage").click(function () {
                $("#divWait").css('display', 'block');
                $("#divWait").focus(10);

                var ecount = 0;
                images = images.slice(0, -1);
                var imageReq = [{}];
                setTimeout(function () {
                    for (var i = 0; i < images.split('~').length; i++) {
                        imageReq[i] = images.split('~')[i];
                        $.ajax({
                            type: 'POST',
                            async: false,
                            url: _AbsolutePath + 'Appointment/SavePatientImage',
                            data: JSON.stringify({ imageData: imageReq[i] }),
                            //data: '{ "lstimageData" : "' + imageReq + '" }',
                            caller: arguments.callee.name,
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            success: function (msg) {
                            },
                            error: function (xhr) {
                                ecount++;
                            }
                        });
                    }
                    if (ecount == 0) {
                        location.href = _AbsolutePath + 'Patient/Index';
                    } else {
                        alert("Unable to save images!");
                    }
                }, 500);
            });
        }, false);
    })();


    function deleteImage(e) {
        var imageStr = $($(e).parent().find('img'))[0].src;
        imageStr = imageStr.replace('data:image/png;base64,', '');
        imageStr = imageStr + '~';
        images = images.replace(imageStr, '');
        $('#images').find($(e).parent().parent()).remove();
        noOfImages = noOfImages - 1;
        if (noOfImages < 5) $("#btnCapture").removeAttr('disabled');
        if (noOfImages < 1) $("#snapshotdiv").fadeOut();
    }
</script>



<section class="container text-center">
    @{HMS.DataContract.Response.UserInfo user = (HMS.DataContract.Response.UserInfo)Session["userInfo"];}

    <video id="v" class="col-xs-12 col-md-12 col-lg-12" style="margin-bottom:15px;" autoplay></video>
    <button id="btnCapture">Capture Image</button>
    <canvas id="c" style="display:none;" width="640" height="480"></canvas>

    <div id="snapshotdiv" style="display:none;vertical-align:top;">
        <br />
        <b>Snapshot:</b>
        <br />
        @{if (user != null && user.Detail == "D")
        {
            <button type="button" class="pull-left" id="SaveImage">Save Image</button>
        }
        else
        {
            <button type="button" class="pull-left" id="btnSaveImage">Save Image</button>
        }
        }<br />
        <div id="divWait" style="display:none;" class="waiting">Please wait images are being saved.</div>
    </div>

    <ul id="images" style="list-style-type:none">

    </ul>
    @*<form>
        <div class="form-group col-lg-12">
            <ul id="images" class="bxslider"></ul>
        </div>
    </form>*@
</section>
<script src="~/Scripts/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<link href="~/Content/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="~/Scripts/jquery.fancybox.pack.js" type="text/javascript"></script>
<link href="~/Content/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.fancybox-thumbs.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery.fancybox-buttons.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.fancybox-media.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.fancybox-thumbs.js" type="text/javascript"></script>

@*<link href="~/Content/slick.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/slick.min.js"></script>*@
<script src="~/Scripts/jquery.liquidcarousel.js"></script>











